<template>
  <div class="content">
    <search-header :name="'操作日志记录'" style="padding-bottom: 8px">
      <template v-slot:form>
        <el-form :model="action.model" ref="queryForm">
          <el-row :gutter="16" type="flex">
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="操作日期">
                <ka-date-picker v-model="dateArr"></ka-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="调用接口名称">
                <el-input v-model="action.model.actionName" clearable style="width: 100%" placeholder="输入调用接口名称"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="操作用户">
                <el-input v-model="action.model.userName" clearable style="width: 100%" placeholder="输入操作用户账号"
                  maxlength="16"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="请求来源">
                <el-input v-model="action.model.requestSource" clearable style="width: 100%" maxlength="10"
                  placeholder="输入请求来源"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16" type="flex">
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="响应状态">
                <el-select v-model="action.model.responseStatus" clearable style="width: 100%" placeholder="请选择">
                  <el-option v-for="item in dicts.STATUS.list" :key="item.itemValue" :label="item.itemName"
                    :value="item.itemValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label-width="formLabelWidth" label="响应码">
                <el-input v-model="action.model.responseCode" clearable style="width: 100%" maxlength="4"
                  placeholder="输入响应码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" align="right">
              <el-button @click="resetForm" type="primary" plain>重 置</el-button>
              <!-- <el-button :loading="downloadLoading" @click="handleDownload" type="primary" v-if="$common.ifThereIsPrivileges(['protect.front.ListLog'])" plain>导 出</el-button> -->
              <el-button @click="searchClick" type="primary">查 询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </search-header>
    <container-body>
      <template v-slot:content>
        <el-table v-table-fix stripe :data="dataList.data" element-loading-text="拼命加载中" fit
          highlight-current-row style="width: 100%" v-loading="loading"
          :header-cell-style="{ background: '#f8f8f8' }" @selection-change="handleSelectionChange">
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" label="日志ID" min-width="260px" show-overflow-tooltip prop="logId">
          </el-table-column>
          <el-table-column align="left" label="操作日期" min-width="120px" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.operateDate">{{
                $utils.formatTimestamp(scope.row.operateDate, "date")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作时间" min-width="120px" prop="operateTime" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.operateTime">{{
                $utils.formatTimestamp(scope.row.operateTime, "time")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="调用接口名称" min-width="150px" show-overflow-tooltip prop="actionName">
          </el-table-column>
          <el-table-column align="left" label="请求来源" min-width="150px" show-overflow-tooltip prop="requestSource">
          </el-table-column>
          <el-table-column align="left" label="上送数据" min-width="300px" show-overflow-tooltip prop="requestData">
          </el-table-column>
          <el-table-column align="left" label="响应状态" min-width="100px" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.responseStatus">
                {{ $utils.dictsFormatter(scope.row.responseStatus, "STATUS")}}
              </span>
            </template></el-table-column>
          <el-table-column align="left" label="响应码" min-width="100px" show-overflow-tooltip prop="responseCode">
          </el-table-column>
          <el-table-column align="left" label="响应信息" min-width="200px" show-overflow-tooltip prop="responseMsg">
          </el-table-column>
          <el-table-column align="left" label="操作用户" min-width="120px" show-overflow-tooltip prop="userName">
          </el-table-column>
          <el-table-column align="left" label="所属机构ID" min-width="120px" show-overflow-tooltip prop="deptId">
          </el-table-column>
          <el-table-column align="left" label="日志追踪ID" min-width="120px" show-overflow-tooltip prop="logTraceId">
          </el-table-column>
          <el-table-column align="left" label="日志文件ID" min-width="120px" show-overflow-tooltip prop="logFileId">
          </el-table-column>
          <el-table-column align="left" label="交易服务器ID" min-width="120px" show-overflow-tooltip prop="serverId">
          </el-table-column>
        </el-table>
        <pagination :currentPage="dataList.currentPage" :total="dataList.total" :pageSize="action.limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></pagination>
      </template>
    </container-body>
  </div>
</template>

<script lang="ts" setup>
/** 全局引入 */
const buttons = [
  { type: "", text: "plain" },
  { type: "primary", text: "primary" },
  { type: "success", text: "success" },
  { type: "info", text: "info" },
  { type: "warning", text: "warning" },
  { type: "danger", text: "danger" },
] as const;
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Star,
  Check,
  ArrowLeft,
  ArrowRight,
  Eleme,
  Message,
} from "@element-plus/icons-vue";
import {
  ref,
  reactive,
  inject,
  onBeforeMount,
  onMounted,
  onUnmounted,
  onErrorCaptured,
  onBeforeUnmount,
  onBeforeUpdate,
  onUpdated,
} from "vue";
const $utils: any = inject("$utils");
const $common: any = inject("$common");
const $request: any = inject("$request");
import { homeStore } from "@/pinia/homeStore.ts";
const homePinia = homeStore();
const dicts = ref($utils.getDicts(["STATUS"]));
/** props数据 */

/** 定义数据 */

const dateArr = ref("");
let multipleSelection = reactive([]);
const dict = reactive([]);
const loading = ref(true);
const downloadLoading = ref(false);
const formLabelWidth = ref("100px");
const action = reactive({
  model: {
    actionName: "",
    userName: "",
    requestSource: "",
    responseStatus: "",
    responseCode: "",
    startDate: "",
    endDate: "",
  },
  offset: 0,
  limit: 20,
});
const dataList = reactive({
  data: [],
  total: 0,
  currentPage: 1,
});
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
/** 侦听 */
/** 计算 */
/** 方法 */
const listData = () => {
  if (dateArr.value && dateArr.value.length > 0) {
    action.model.startDate = dateArr.value[0];
    action.model.endDate = dateArr.value[1];
  } else {
    action.model.startDate = "";
    action.model.endDate = "";
  }
  loading.value = true;
  $request
    .rpc({ name: "admin.operate.ListLog", action })
    .then((result: any) => {
      loading.value = false;
      dataList.total = result.list.total || 0;
      dataList.data = result.list.data || [];
    })
    .catch((error: any) => {
      loading.value = false;
      dataList.total = 0;
      dataList.data = [];
    });
};
// 重置
const resetForm = () => {
  dateArr.value = "";
  action.model.startDate = "";
  action.model.endDate = "";
  action.model.endDate = "";
  action.model.userName = "";
  action.model.requestSource = "";
  action.model.responseStatus = "";
  action.model.responseCode = "";
};
// 查询
const searchClick = () => {
  action.offset = 0;
  dataList.currentPage = 1;
  listData();
};
// 选中导出项
const handleSelectionChange = (val: any) => {
  multipleSelection = val;
};
const handleCurrentChange = (page: any) => {
  action.offset = (page - 1) * action.limit;
  listData();
};
const handleSizeChange = (size: any) => {
  action.limit = size;
  action.offset = 0;
  dataList.currentPage = 1;
  listData();
};
/** 生命周期钩子 */
onBeforeMount(() => {
  // console.log('挂载前');
  listData();
});
onMounted(() => {
  // console.log('挂载完成');
});
onBeforeUpdate(() => {
  // console.log('更新前');
});
onUpdated(() => {
  // console.log('更新完成');
});
onBeforeUnmount(() => {
  // console.log('销毁前');
});
onUnmounted(() => {
  // console.log('销毁完成');
});
onErrorCaptured(() => {
  // console.log('子组件渲染发生错误时');
});
</script>

<style scoped lang="scss"></style>
